<template>
  <div>
    <!-- case info-->
    <div style="margin-top: 10px; margin-bottom: 20px; margin-left: 10px">
      <el-button  icon="el-icon-back" size="small" @click="backHistory" />
      <!-- steps list-->
      <router-link :to="'/TestManager/step/create/'+caseId" style="margin-left: 20px">
        <el-button type="primary" size="small">新增</el-button>
      </router-link>
      <span style="margin-left: 500px">{{ caseInfo.case_num }}-{{ caseInfo.name }}</span>
    </div>
    <el-table v-loading="loading" :data="list" border>
      <el-table-column label="ID" prop="id" width="75px">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="顺序号" prop="step_num" width="75px">
        <template slot-scope="scope">
          <span>{{ scope.row.step_num }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name" width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="type" width="200px">
        <template slot-scope="scope">
          <span>{{ typeOptions[scope.row.type] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="参数" prop="params">
        <template slot-scope="scope">
          <span>{{ scope.row.params }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="{row}">
          <router-link :to="'/TestManager/step/edit/'+row.id">
            <el-button icon="el-icon-edit" size="small">编辑</el-button>
          </router-link>
          <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteData(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getCaseSteps, deleteStep } from '@/api/step'
import { getCase } from '@/api/case'
export default {
  name: 'List',
  data() {
    return {
      loading: false,
      list: [],
      caseId: 0,
      listQuery: {
        case: 0,
        page: 1,
        limit: 20
      },
      total: 0,
      caseInfo: {},
      typeOptions: {
        web: 'Web自动化',
        app: 'App自动化',
        interface: '接口自动化',
        sql: '数据库'
      }
    }
  },
  created() {
    this.caseId = this.$route.params && this.$route.params.id
    this.listQuery.case = this.caseId
    this.getCaseInfo()
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      getCaseSteps(this.listQuery).then((response) => {
        this.list = response.results
        this.total = response.count
        this.loading = false
      })
    },
    getCaseInfo() {
      getCase(this.caseId).then((response) => {
        this.caseInfo = response.data
      })
    },
    deleteData(id) {
      this.loading = true
      deleteStep(id).then(() => {
        this.$notify({
          title: '提示',
          message: '删除成功',
          type: 'success',
          duration: 1000
        })
        this.getList()
        this.loading = false
      })
    },
    backHistory() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>

</style>
